<template>
<div class="modal fade upload-dlg" data-backdrop="static" data-keyboard="true" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-center text-info"><span>{{title}}</span></h4>
            </div>
            <div class="modal-body">
                <slot name="header"></slot>
                <el-upload :drag="drag" :action="url" :multiple="multiple" :show-file-list="showFileList" :limit="1" :on-success="onSuccess" :on-progress="onProgress" :on-error="onError" :on-remove="onRemove" :accept="accept" :before-upload="beforeUpload" :auto-upload="autoUpload" ref="uploader">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将配置数据拖到此处，或 <em>点击上传</em></div>
                    <div class="el-upload__tip text-center" slot="tip">{{tip}}<span style="color:red"> *上传成功会自动删除原有数据，请注意导出备份*</span></div>
                </el-upload>
                <slot name="footer"></slot>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" :disabled="bProgress">关闭</button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import 'jquery-ui/ui/widgets/draggable'
import $ from 'jquery'

export default {
    props: {
        title: {
            default: '上传'
        },
        url: {
            type: String,
            default: ''
        },
        multiple: {
            type: Boolean,
            default: false
        },
        drag: {
            type: Boolean,
            default: true
        },
        showFileList: {
            type: Boolean,
            default: true
        },
        accept: {
            default: '.xlsx'
        },
        tip: {
            default: '仅限上传.xlsx'
        },
        limit: {
            type: Number,
            default: 0
        },
        autoUpload: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            bShow: false,
            bProgress: false
        }
    },
    mounted() {
        $(this.$el).find('.modal-content').draggable({
            handle: '.modal-header',
            cancel: ".modal-title span",
            addClasses: false,
            containment: 'document',
            delay: 100,
            opacity: 0.5
        });
        $(this.$el).on("shown.bs.modal", () => {
            this.$emit("show");
            this.bShow = true;
        }).on("hidden.bs.modal", () => {
            this.$emit("hide");
            this.bShow = false;
            this.$refs['uploader'].clearFiles();
        }).on("hide.bs.modal", () => {
            if (this.bProgress) {
                this.$message({
                    type: 'error',
                    message: '正在上传, 请稍后...'
                });
                return false;
            }
        });
    },
    methods: {
        show() {
            $(this.$el).modal("show");
        },
        hide() {
            $(this.$el).modal("hide");
        },
        beforeUpload(file) {
            if (this.limit && file.size > this.limit) {
                this.$message({
                    type: 'error',
                    message: `文件[${file.name}]大小超过限制[${this.limit}], 不能上传!`
                })
                return false;
            }
            return true;
        },
        onSuccess(res, file, fileList) {
            for (var f of fileList) {
                if (f.percentage != 100 && f.percentage !== 0) {
                    this.bProgress = true;
                    return;
                }
            }
            this.bProgress = false;
            this.$emit('uploaded', file);
        },
        onProgress(evt, file, fileList) {
            this.bProgress = true;
        },
        onError(err, file, fileList) {
            if (err) {
                this.$message({
                    type: "error",
                    message: err + ""
                })
            }
            for (var f of fileList) {
                if (f.percentage != 100 && f.percentage !== 0) {
                    this.bProgress = true;
                    return;
                }
            }
            this.bProgress = false;
        },
        onRemove(file, fileList) {
            for (var f of fileList) {
                if (f.percentage != 100 && f.percentage !== 0) {
                    this.bProgress = true;
                    return;
                }
            }
            this.bProgress = false;
        }
    }
}
</script>

<style lang="less">
.upload-dlg {
    .modal-dialog {
        .modal-body {
            overflow: hidden;

            .el-upload {
                display: block;

                .el-upload-dragger {
                    margin: 0 auto;
                }
            }
        }
    }
}
</style>
